<template>
	<view style="background-color: white;">
		<view v-if="refundLists.length>0">
			<view style="height: 15rpx;background-color: #dee2ea;"></view>
			<view class="order-box" v-for="(item,i) in refundLists" :key="item.id">
				<view class="box-b" style="height:55px;display:flex;" @click="goRefundDetail(item.id)">
					<image :src="swichImages(item.ppGoods.gimages)" style="height: 60px;width: 60px;margin-top: 12rpx;">
					<view class = "info">
						<view class="number">{{item.ppGoods.gname}}</view> 
						<view class="time" style="width: 400rpx;">{{item.ppGoods.jianjie}}</view> 
					</view> 
					<view class = "ways">
						<view style="margin-bottom:10px;font-size: 16px;margin-left: 70px;">{{item.refund_type==0?"退款":(item.refund_type==1?"退货":(item.refund_type==2?"换货":"退款不退货"))}}</view>
					</view>
				</view>
				<view style="margin-top: 15px;font-size: 12px;display: flex;justify-content:space-between;">
					<view class="detail">{{item.refund_sqTime}}</view>
					<view class="reason">{{item.refund_reason==0?"其他":(item.refund_reason==1?"七天无理由退货":(item.refund_reason==2?"产品质量问题":(item.refund_reason==3?"发票问题":(item.refund_reason==4?"不喜欢了/不爱了":(item.refund_reason==5?"拍错了/看错了":"未按约定时间发货")))))}}</view>
					<view class="statusinfo">
						<view>
							{{item.shensu==0?(item.refund_status==0?"申请中":(item.refund_status==1?"申请未通过":(item.refund_status==2?(item.user_express_numbers==null || item.user_express_numbers==""?"申请成功":"等待商家收货中"):(item.refund_status==3?"商家已收到货":(item.refund_status==4?"商家已发货":(item.refund_status==5?"客户已收货":(item.refund_status==6?"退款成功":"退货成功"))))))):(item.shensu==1?"平台申诉中":(item.shensu==2?"平台申诉驳回":(item.refund_type==3?"平台申诉成功，已退款":(item.user_express_numbers==null || item.user_express_numbers==""?"平台申诉成功":(item.refund_status==3?"商家已收到货":(item.refund_status==4?"商家已发货":(item.refund_status==5?"换货完成":(item.refund_status==6?"退款成功":(item.refund_status==7?"退货成功":"平台申诉成功")))))))))}}
						</view>
						<view v-if="item.refund_status==4">请到订单页面收货</view>
						<view v-if="(item.refund_status==0 && item.shensu==0) || item.refund_status==1" style="padding-top: 10rpx;color: #000000;font-weight: bold;" @click="shensu(item.id)">我要申诉</view>
						<view v-if="(item.user_express_numbers=='' || item.user_express_numbers==null) && item.shensu==0 && item.refund_status==2" @click="goRefundDetail(item.id)">请填写快递</view>
						<view v-if="item.shensu==3" style="padding-top: 10rpx;color: red;">
							<view v-if="item.refund_type==3">已退款</view>
							<view v-if="item.user_express_numbers=='' || item.user_express_numbers==null" @click="goRefundDetail(item.id)">请填写快递</view>
							<view v-if="item.refund_status==2 && item.user_express_numbers!='' && item.user_express_numbers!=null" style="padding-top: 10rpx;">等待商家收货</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tips-text">{{tips}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,			//页数
				size:10,		//条数
				refundLists:[], //退换货集合
				tips:"上拉加载更多数据",
			}
		},
		onReachBottom() {
			if(this.tips=='上拉加载更多数据'){
				this.page++;
				this.getRefundRecord();
			}
		},
		onLoad() {
			this.getRefundRecord()
		},
		methods: {
			//查询退换货详情
			goRefundDetail(id){
				console.log("跳转ID："+id)
				//跳退换货详情
				uni.navigateTo({
					url:'refundDetail?id='+id
				})
			},
			//去申诉
			shensu(id){
				uni.navigateTo({
					url:'shensu?id='+id
				})
			},
			swichImages(picture){
				if(picture.length<1){
					return '../../static/center/yuantiao.jpg'
				}else{
					return this.host+picture
				}
			},
			//获取用户退换货集合
			getRefundRecord(n){
				this.$http.get('/ppRefund/userSearchRefundInfo', {
					page:this.page,
					limit:this.size,
					userId:uni.getStorageSync('usersId')
				}).then(res => {
					console.log(res.data.data)
					if(res.data.code==200){
						if(res.data.data.length>0){
							this.refundLists=this.refundLists.concat(res.data.data);
							if(this.page==1 && res.data.data.length < this.size){
								this.tips="";
							}
						}else{
							this.tips="没有更多数据";
						}
					}
				})
			},
		}
	}
</script>

<style>
	.reason,.statusinfo{
		color: #f36243;
	}
	.time,.detail{
		/* font-size: 14px; */
		color: #cccccc;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.order-box{
		padding: 30rpx 0 15rpx 30rpx;
		border-bottom: 1px #d1d1d1 solid;
		margin: 0 10rpx 0 10rpx;
	}
	#houtai {
		background-image: url(${pageContext.request.contextPath}/weixin/img/center/dianpu.png);
	}
	.info {
		float: left;
		width: 160px;
		margin-left: 20px;
	}
	.number {
		font-size: 14px;
		/* color: #FF6700; */
		margin-bottom: 5px;
	}
	.time {
		font-size: 14px;
	}
	.nav-header h1 {
		text-align: left;
	}
	.nav-header a {
		color: white;
	}
	.tips-text,.no-goods-box{
		text-align: center;
	}
</style>
